<template>
	<!-- <van-dialog
    title="提示"
    :show="authDialogShow"
    message="小程序需要您登录获取您的头像、昵称等信息"
    show-cancel-button
    confirm-button-text="登录"
    @cancel="cancel"
    @confirm="getUserInfo"
  ></van-dialog> -->
	<view >
		<block v-if="!showPrivacySetting">
			<van-popup position="bottom" z-index="1999" @close="cancel" :show="authDialogShow" close-icon="close">
				<view class="pop-wrapper">
					<view class="pop-title">请填写必要的信息</view>
					<button 
						class="pop-avatar"
						open-type="chooseAvatar"
						@chooseavatar="uploadAvatar"
					>
						<view class="text">
							头像
							<text style="color:red;">*</text>
						</view>
						<view class="avatar-wrapper">
							<image :src="avatar" mode="widthFix" />
						</view>
					</button>
					<view class="pop-nickname">
						<view class="text">
							昵称
							<text style="color:red;">*</text>
						</view>
						<input 
							v-model="nickname"
							type="nickname"
							placeholder="请输入昵称"
							maxlength="16"
							@blur="iptChange" 
						/>
					</view>
					<view class="btns">
						<view class="cancel-btn" @click="cancel" hover-class="hover-class">取消</view>
						<view class="edit-btn" @click="getUserInfo" hover-class="hover-class">确认</view>
					</view>
				</view>
			</van-popup>
		</block>
		<block v-else>
			<privacy-popup :innerShow.sync="showPrivacySetting" mainColor="#ff563d"></privacy-popup>
		</block>
	</view>
	
	
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		updateUserInfo,
		trim
	} from "@/utils";
	import {
		setStorage,
		removeStorage
	} from "@/utils/storage";
	import {
		VUE_APP_API_URL
	} from "@/config/index.js";
	import { getUserInfo } from "@/api/user";
	import privacyPopup from "@/components/privacyPopup";
	import { PrivacySetting } from "@/mixins/PrivacySetting.js";
	export default {
		mixins:[PrivacySetting],
		components:{
			privacyPopup
		},
		props: {
			showLoad: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				imgUrl: this.$VUE_APP_RESOURCES_URL,
				authDialogShow: false,
				avatar: null,
				nickname: null,
			};
		},
		computed: mapGetters(['userInfo']),
		methods: {
			show() {
				if(this.isPrivacy()){
					this.getPrivacySetting().then(()=>{
						this.getLoctionStorge()
					})
					return
				}else{
					this.authDialogShow = true;
				}
			},
			// 昵称框输入
			iptChange(e) {
				if (e.target.value) {
					this.nickname = e.target.value;
					console.log(this.nickname);
				}
			},
			// 上传头像
			uploadAvatar(e) {
				console.log(e);
				const {
					avatarUrl
				} = e.target;
				let that = this;
				wx.showLoading({
					title: "上传中",
					mask: true
				});
				wx.uploadFile({
					url: `${VUE_APP_API_URL}/api/api/upload`,
					// url: `${VUE_APP_API_URL}/common/uploads`,
					// url:`${VUE_APP_API_URL}/mcDraw/seccheckImage`,
					name: 'file',
					filePath: avatarUrl,
					success(res) {
						let result = JSON.parse(res.data).link;
						wx.hideLoading();
						wx.showToast({
							title: "上传成功",
							icon: "none",
							duration: 1500
						})
						that.avatar = result;
					},
					fail(err) {
						let error = err.response.data;
						wx.hideLoading();
						wx.showToast({
							title: error.message || error.msg || "上传失败",
							icon: "none",
							duration: 1500
						});
					}
				})
			},
			// 获取用户信息
			getUserInfo() {
				if (!this.avatar) {
					wx.showToast({
						title: "请选择头像",
						icon: "none",
						duration: 2000
					});
					return;
				};
				if (!this.nickname || (this.nickname && this.nickname.trim() == "")) {
					wx.showToast({
						title: "请输入昵称",
						icon: "none",
						duration: 2000
					});
					return;
				};
				// wx.getUserProfile({
				// 	desc: "更新用户信息",
				// 	success: res => {
						let data = {
							// iv: res.iv,
							// encryptedData: res.encryptedData,
							avatar: this.avatar,
							nickname: trim(this.nickname)
						};
						wx.showLoading({
							title: "授权中",
							mask: true
						});
						updateUserInfo(data).then((result) => {
							wx.hideLoading();
							getUserInfo().then(res=>{
								this.$store.commit("UPDATE_USERINFO", res.data);
								uni.setStorageSync("hasUserInfo", true);
								wx.showToast({
									title: "授权成功",
									icon: "none",
									duration: 1500
								})
								this.authDialogShow = false;
								// let data = {
								// 	avatar: this.avatar,
								// 	nickname: this.nickname
								// }
								console.log('confirmdata', result)
								this.$emit("confirm", result);
							});
						}).catch(err => {
							wx.showToast({
								title: err.message || "授权失败",
								icon: "none",
								duration: 2000
							});
							this.avatar = "";
							this.nickname = "";
							uni.removeStorageSync("hasUserInfo");
							this.authDialogShow = false;
							wx.hideLoading();
						});
					// },
					// fail: () => {},
				// })
			},
			// 取消授权
			cancel() {
				this.authDialogShow = false;
				setTimeout(() => {
					this.avatar = "";
					this.nickname = "";
					this.$emit("cancel");
				})
			}
		}
	};
</script>
<style lang="less" scoped>
	.pop-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;

		&>view {
			width: 100%;
		}

		.pop-title {
			font-size: 32rpx;
			color: #505050;
			padding: 20rpx 0 10rpx 10rpx;
		}

		;

		.text {
			font-size: 30rpx;
		}

		.pop-avatar {
			width:100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 0;
			border-bottom: 1rpx solid #f5f5f5;

			&>view {
				height: 100%;
			}

			.avatar-wrapper {
				margin: 0;
				padding: 0;
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				background: #000;
				overflow: hidden;
				border: none;
				border: 0;
				background: rgb(241, 241, 241);

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					vertical-align: middle;
				}
			}
		}

		.pop-nickname {
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 20rpx;
			border-bottom: 1rpx solid #f5f5f5;

			input {
				width: 400rpx;
				border: 0;
				font-size: 24rpx;
				text-align: right;
			}
		}

		.btns {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			&>view {
				width: 200rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				border-radius: 10rpx;
			}

			.cancel-btn {
				background-color: #f5f5f5;
				color: black;
			}

			.edit-btn {
				background-color: rgb(7, 193, 96);
				color: white;
			}
		}
	}
</style>
